<template>
	<div id="suggest_approve">
		<!--工具条-->
		<div name="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="类型"  prop="suggestType">
					<el-select size="small" v-model="filters.suggestType" clearable placeholder="请选择">
						<el-option v-for="item in suggestTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="el-form-item" label="投诉建议时间" prop="suggestTimeBegin">
					<el-date-picker v-model="filters.suggestTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item class="el-form-item" label="至" prop="suggestTimeEnd">
					<el-date-picker v-model="filters.suggestTimeEnd"  type="datetime" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>
		<!--toolbar-->
		<el-row id="toolbar_unit">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button  type="success" size="mini" icon="el-icon-check" :disabled="this.sels.length!=1"  @click="handleApprove">受理</el-button>
					<el-button v-if="tsjy_upload" type="primary" size="mini" @click="handleSubmit" :disabled="this.sels.length===0" icon="el-icon-upload">上报</el-button>
				</div>
			</el-col>
		</el-row>

		<!--列表-->
		<el-table :data="buildingDatas" id="dataGrid" empty-text=" " border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="ownerName" label="业主名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="communityName" label="小区名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildingName" label="楼宇名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="unitName" label="单元名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseName" label="房屋名称" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="suggestitemName" label="投诉建议事项" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="suggestTime" label="投诉建议时间" width="160" show-overflow-tooltip></el-table-column>
			<el-table-column prop="description" label="投诉建议内容"  show-overflow-tooltip></el-table-column>
			<el-table-column prop="statusName" label="状态" width="80" show-overflow-tooltip></el-table-column>
			<el-table-column prop="typeName" label="类型" width="80" show-overflow-tooltip></el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		<!--受理界面-->
		<el-dialog title="受理" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" size="mini">
				<el-col :span="12">
					<el-form-item label="小区名称" prop="communityName">
						<el-input v-model="editForm.communityName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="楼宇名称" prop="buildingName">
						<el-input v-model="editForm.buildingName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="单元名称" prop="unitName">
						<el-input v-model="editForm.unitName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="房屋名称" prop="houseName">
						<el-input v-model="editForm.houseName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="业主名称" prop="ownerName">
						<el-input v-model="editForm.ownerName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="投诉建议时间">
						<el-date-picker type="datetime" :disabled="true" v-model="editForm.suggestTime"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="类型">
						<el-input v-model="editForm.typeName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="投诉建议事项">
						<el-input v-model="editForm.suggestItemName" :disabled="true"  ></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="投诉建议内容" prop="description" >
                        <el-input type="textarea" :rows="4" v-model="editForm.description" :disabled="true"  ></el-input>
                    </el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="受理回复" prop="resultDescription" >
                        <el-input type="textarea" :rows="4" v-model="editForm.resultDescription"  ></el-input>
                    </el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--上报人选择界面-->
		<el-dialog title="选择" :visible.sync="userSelectFormVisible" :close-on-click-modal="false">
			<el-form :model="userSelectForm" label-width="80px" ref="userSelectForm" size="mini">
				<el-input v-model="userSelectForm.buildingId" type="hidden" style="display: none!important;"></el-input>
				<el-form-item label="负责人" prop="safeUser">
					<el-input v-model="userSelectForm.safeUser" auto-complete="off" placeholder="请输入负责人"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="userSelectFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="userSelectSubmit" :loading="userSelectLoading">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	import {mapGetters} from 'vuex'
	export default{
		name:'suggestApprove',
		data(){
			return{
                //单元过滤条件
                filters: {
                    suggestType:'',
                    suggestTimeBegin:'',
                    suggestTimeEnd:''
                },
                url:{

                    //单元数据
                    list:"/admin/suggestRecord/page",
                    approve:'/admin/suggestRecord/approve',
                    submitSug:'/admin/suggestRecord/submitSug',
                    toApprove:'/admin/suggestRecord/toApprove'

                },
                buildingDatas:[],
                suggestTypeOptions:[],
                sort:{
                    sort:'sort',
                    order:'asc'
                },
                total: 0,
                page: 1,
                pageSize:10,
                listLoading:false,
                sels:[],
                editLoading: false,
                editFormVisible: false,
                editForm: {},
        editFormRules: {
          resultDescription: [{
            required: true,
            message: '请输入受理回复'
          }]
        },
                userSelectFormVisible:false,
                userSelectLoading:false,
                userSelectForm:{}


      		}
		},
		computed: {
    		...mapGetters(['permissions'])
  		},
  		created() {
    		this.tsjy_upload = this.permissions['tsjy_upload']
  		},
		methods: {
      //初始化数据字典
      initDictsData: function () {
        request.get("/admin/dict/type/suggest_type").then((res) => {
          if (res.status === 200) {
            this.suggestTypeOptions = res.data;
          }
        });

      },
			handleSortChange(sort){
                this.sort={
                    sort:sort.prop,
                    order:sort.order=='ascending'?'asc':'desc'
                };
                this.getDataGrid();
            },
            tableRowClassName(row, index) {
                //把每一行的索引放进row
                row.index = row.rowIndex
            },
            headStyle({ row, rowIndex }){
                return "table_head_style";
            },
            index_formatter:function(row, column ,cellValue,index) {
                //放回索引值
                return (this.pageSize * (this.page - 1)  + 1+ index);
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getDataGrid();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.getDataGrid();
            },
            resetSearchForm(formName) {
              this.filters = {
                suggestTimeBegin: '',
                suggestTimeEnd: '',
                suggestType: ''
              }
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleSubmit:function (index, row) {
                //上报
                this.$confirm('确认上报吗？', '提示', {}).then(() => {
                    this.listLoading = true;
                    let para = {
						suggestRecordId: this.sels.map(item => item.id).toString()
					};
                    request.get(this.url.submitSug,{params:para}).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: '上报成功',
                            type: 'success',
                            duration:1500
                        });

                      this.getDataGrid();
                    });
                });
            },

      //显示受理界面
            handleApprove: function () {
                this.editFormVisible = true;
                var id = this.sels.map(item => item.id).toString();
                let para = {
						suggestRecordId: id
					};
                request.get(this.url.toApprove, {
						params: para
					}).then((res) => {
                    this.editForm = Object.assign({}, res.data);
                });

            },

      //受理
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
//                          let para = {
//								suggestRecordId: this.sels.map(item => item.id).toString()
//							};
							let para = Object.assign({}, this.editForm);
                            request.post(this.url.approve,para).then((res) => {
                                this.editLoading = false;
                                this.$message({
                                    message: '受理成功',
                                    type: 'success',
                                    duration:1500
                                });
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getDataGrid();
                            });
                        });
                    }
                });
            },

      //获取单元列表数据
            getDataGrid(flag) {
            	if(flag){
      				this.page = 1;
      			}
                //获取当前树节点选中小区
                let para = {
                    params: {
                        page: this.page,
                        limit: this.pageSize,
                        //排序
                        orderByField:this.sort.sort,
                        isAsc:this.sort.order,
                        suggestTimeBegin:this.filters.suggestTimeBegin,
                        suggestTimeEnd:this.filters.suggestTimeEnd,
                        suggestType:this.filters.suggestType,
                        isUpload:this.tsjy_upload
                    }
                };
                this.listLoading = true;
                request.get(this.url.list,para).then((res) => {
                    this.total = res.data.total;
                    var datas=res.data.records;
                    this.buildingDatas = datas;
                    this.listLoading = false;
                });
            }
		},
		mounted() {
			this.getDataGrid();
      this.initDictsData();
		}
	}
</script>
